import { PureComponent } from 'react'
import { Select, Input, DatePicker, Button } from 'antd'
import SingleTable from 'components/table/index'
import StorageCheckModal from 'components/modal/storageCheckModal'
import styles from './storageCheck.less'
const { Option } = Select
export default class StorageCheck extends PureComponent {
    state = {
        visible:false
    }
    renderModal (){
        const { visible } = this.state
        return(
            <StorageCheckModal 
                visible={visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
            />
        )
    }
    handleOk =() => {
        this.setState({ visible: false})
    }
    handleCancel = () => {
        this.setState({ visible: false})
    }
    handleAdd = () => {
        this.setState({ visible: true })
    }
    render(){
        const dataList = []
        const columns = [
        {
            key: 'gmtCreate',
            title: 'ID',
            dataIndex: 'gmtCreate',
            align: 'center',
        },
        {
            key: 'operationTypeName',
            title: '货架编号',
            dataIndex: 'operationTypeName',
            align: 'center',
        },
        {
            key: 'creatorName',
            title: '货架区域',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '5',
            title: '所属仓库',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '6',
            title: '任务状态',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '7',
            title: '盘点人',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '8',
            title: '创建时间',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '9',
            title: '创建人',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '10',
            title: '盘库记录',
            dataIndex: 'creatorName',
            align: 'center',
        },
        {
            key: '11',
            title: '操作',
            dataIndex: 'creatorName',
            align: 'center',
            render: (text, record) => (
                <span>
                  <a >编辑</a>
                </span>
            ),
        },
        ]
        return(
            <div className={styles.storageCheck}>
                <div className={styles.storageCheckBox}>
                    <h2>盘库任务</h2>
                </div>
                <div className={styles.storageCheckSearch}>
                    <div className={styles.storageCheckSin}>
                        <span className={styles.storageCheckSpan}>仓库：</span>
                        <Select className={styles.storageCheckInput}>
                            <Option value="lovely">lovely</Option>
                        </Select>
                    </div>
                    <div className={styles.storageCheckSin} style={{margin: '0 28px'}}>
                        <span className={styles.storageCheckSpan}>货架编号：</span>
                        <Input className={styles.storageCheckInput}/>
                    </div>
                    <div className={styles.storageCheckSin} style={{marginRight: '28px'}}>
                        <span className={styles.storageCheckSpan}>任务日期：</span>
                        <DatePicker className={styles.storageCheckInput}/>
                    </div>
                    <div className={styles.storageCheckSin} style={{margin: '0 28px'}}>
                        <span className={styles.storageCheckSpan}>任务状态：</span>
                        <Select className={styles.storageCheckInput}>
                            <Option value="lovely">lovely</Option>
                        </Select>
                    </div>
                </div>
                <div className={styles.storageCheckSearch}>
                    <div className={styles.storageCheckSin}>
                        <span className={styles.storageCheckSpan}>货架区域：</span>
                        <Select className={styles.storageCheckInput}>
                            <Option value="lovely">lovely</Option>
                        </Select>
                    </div>
                </div>
                <div className={styles.storageCheckButton}>
                    <Button type="primary" icon="search" style={{marginRight: '24px'}}>查询</Button>
                    <Button icon="plus" onClick={this.handleAdd}>新建</Button>
                </div>
                <div className={styles.storageCheckTable}>
                    <SingleTable
                        data={{ list: dataList }}
                        columns={columns}
                        
                    />
                </div>
                {this.renderModal()}
            </div>
        )
    }
}